<template>
  <codemirror
    ref="mycodemirror"
    v-model="code"
    :autofocus="true"
    :extensions="extensions"
    :indent-with-tab="true"
    :tab-size="2"
    @change="handleChange"
  />
</template>
<script lang="ts" name="CodemirrorYaml" setup>
import { Codemirror } from 'vue-codemirror';
import { yaml } from '@codemirror/lang-yaml';

const emit = defineEmits(['update:modelValue', 'update:textVal']);
const extensions = [yaml()];

const handleChange = (e: string) => {
  code.value = e;
  emit('update:modelValue', code.value);
};

const code = ref(`
{
  "apiVersion": "v1",
  "kind": "Job",
  "metadata": {
    "name": "task-name",
    "namespace": "default",
    "labels": {
      "app": "example-app"
    },
    "annotations": {
      "description": "Task for example"
    }
  },
  "spec": {
    "containers": [
      {
        "name": "container-1",
        "image": "example-image:v1",
        "command": ["python", "app.py"],
        "resources": {
          "cpu": "100m",
          "memory": "256Mi",
          "gpu": "1"
        },
        "volumeMounts": [
          {
            "name": "volume-1",
            "mountPath": "/mnt/data"
          }
        ],
        "fsFiles": [
          {
            "name": "config-file",
            "path": "/etc/config"
          }
        ]
      },
      {
        "name": "container-2",
        "image": "another-image:v2",
        "command": ["bash", "script.sh"],
        "resources": {
          "cpu": "200m",
          "memory": "512Mi",
          "gpu": "0"
        },
        "volumeMounts": [
          {
            "name": "volume-2",
            "mountPath": "/mnt/config"
          }
        ],
        "fsFiles": [
          {
            "name": "config-file-2",
            "path": "/etc/config-2"
          }
        ]
      }
    ],
    "replica": 2
  }
}
`);
</script>
